<template>
  <div class="outBox">
      <div v-for="(item) in historyItem" :key="item.id" style="width:50%;">
          <div class="box" @click="goBlog(item)">
              <h2>{{item.blogName}}</h2>
              <p>{{time(item.closeTime)}}</p>
          </div>
      </div>

  </div>
</template>

<script>
import {formatTime} from "../../../formatTime"
export default {
    data(){
        return {
            historyItem:[]
        }
    },
    created(){
        this.ifCurrentBlogHasGood()
    },
    computed:{
        time(){
            return function(item){
                return formatTime(item*1)
            }
        }
    },
    methods:{
        goBlog(item){
            this.$router.push("/detail/"+item.blogId)
        },
        ifCurrentBlogHasGood() {
      this.$axios
        .get("/history/search", {
          params: {
            username: this.$store.getters.user.username,
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.error === -1) {
            //说明当前博客已被收藏
            this.historyItem = res.data.data;
          } else {
            this.historyItem = [];
          }
        });
    },
    }

}
</script>

<style lang="less" scoped>
    .outBox{
        display: flex;
        flex-wrap: wrap;
        .box{
            // width: 50%;
        margin: 15px;
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.4);
        transition: all 0.2s;
        &:hover{
            box-shadow: 0 3px 7px rgba(3, 3, 3, 0.3);
            transform: translateY(-5px) scale(1.02);
        }
        h2{
            overflow: hidden;
            white-space:nowrap;
            text-overflow: ellipsis;
        }
        p{
            font-weight: 200;
            color: rgba(3, 3, 3, 0.5);
        }
    }
    }
</style>